<template>
  <div
    v-if="$attrs.element.key"
    class="c-box"
    :key="$attrs.element.key"
    :class="{
      active:
        store && $attrs.element.key && $attrs.element.key == store.current.key,
    }"
  >
    <div
      :class="[
        'drop-wrap',
        model == 'design' && $attrs.element.options.hidden == true
          ? 'stealth'
          : null,
      ]"
      v-if="model == 'design'"
    >
      <span class="mover">
        <i class="el-icon-rank"></i>
      </span>
      <slot></slot>
      <div class="copy" @click.stop="handleClone($attrs.index)">
        <span class="replication">
          <i class="el-icon-copy-document"></i>
        </span>
      </div>
      <div class="remove" @click.stop="handleDelete($attrs.index)">
        <span class="reduce">
          <i class="el-icon-delete"></i>
        </span>
      </div>
    </div>
    <div class="preview-wrap" v-else>
      <div v-show="previewHidden">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import clone from "clone";
export default {
  inject: [ "model"],
  data() {
    return {
      // store
    };
  },
  computed: {
    store() {
      return this.$attrs.element.getRoot();
    },
    previewHidden() {
      if (
        this.model == "preview" &&
        this.$attrs.element.options.hidden == true
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    handleClone(index) {
      let Clist=[]
      this.store.deepCloneComponentMap( [this.$attrs.data[index]],Clist);
      this.$attrs.data.splice(index, 0, Clist[0]);
      this.$handleStack.push(clone(this.store.root));
      // this.store.formModel.buildFormModel();
      this.$nextTick(() => {
        this.store.current = this.$attrs.data[index + 1];
        this.store.eventCenter.fire("current", this.$attrs.data[index + 1]);
        Clist=[]
      });
    },
    handleDelete(index) {
      // console.log(this.$attrs)
      // console.log('index', index)
      if (this.$attrs.data.length - 1 === index) {
        if (index == 0) {
          this.store.current = {};
          // this.store.eventCenter.fire("current", {});
        } else {
          this.store.current = this.$attrs.data[index - 1];
          // this.store.eventCenter.fire("current", this.$attrs.data[index - 1]);
        }
      } else {
        this.store.current = this.$attrs.data[index + 1];
        // this.store.eventCenter.fire("current", this.$attrs.data[index + 1]);
      }
      this.store.delComponentMap(this.$attrs.data[index]);

      this.$handleStack.push(clone(this.store.root));
      // this.store.formModel.buildFormModel();
      this.$nextTick(() => {
        this.$delete(this.$attrs.data, index);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.design-interface .active > .drop-wrap > .copy,
.design-interface .active > .drop-wrap > .remove,
.design-interface .active > .drop-wrap > .mover {
  display: block !important;
}
.design-interface .active .el-icon-copy-document {
  color: #7dc4f9 !important;
}
.design-interface .active .el-icon-rank {
  color: #ffffff !important;
}
.design-interface .active .el-icon-delete {
  color: #fc5757 !important;
}

.stealth {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("~@/low-code/assets/stealth.png");
    transform: unset;
    z-index: 999;
    cursor: not-allowed;
  }
}
</style>